import React, { Component } from "react";
import { Modal, Icon } from "antd";

import SelectUser from "../SelectUser";
import "./index.less";

/** 选择人员弹窗 */
class PartmentSelect extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      checkedkeys: this.props.value || "null",
      visible: this.props.visible,
      arrayObj: []
    };
  }

  componentWillReceiveProps(nextprops) {
    this.setState({
      visible: nextprops.visible,
      checkedkeys: nextprops.value || "null"
    });
  }

  handleCancel = () => {
    this.setState({
      visible: false,
      checkedkeys: "null"
    });
    this.props.handleCancel();
  };

  handleOk = () => {
    this.setState({
      visible: false
    });
    this.props.onCheck(
      this.state.checkedkeys === "null" ? "" : this.state.checkedkeys,
      this.state.arrayObj
    );
  };

  showModal = e => {
    const targetClass = e.target.className;
    if (
      targetClass === "ant-select-selection__rendered" ||
      targetClass === "ant-select-selection__placeholder" ||
      targetClass.indexOf("ant-select-selection--multiple") !== -1
    ) {
      this.setState({ visible: true });
    }
  };

  render() {
    let { arrayObj } = this.state;
    const selectedList = () => {
      return arrayObj.map((val, i) => {
        return (
          <div key={val.key} className="PartmentSelect-list-item">
            <Icon type="user" /> {val.title || val.name}
            <Icon
              onClick={() => {
                let checkedkeys = this.state.checkedkeys.slice();
                if (checkedkeys instanceof Array) {
                  checkedkeys = checkedkeys.filter(value => {
                    if (val.key === value) {
                      arrayObj.splice(i, 1);
                    }
                    return val.key !== value;
                  });
                } else {
                  checkedkeys = "null";
                  arrayObj = [];
                }

                this.setState({ checkedkeys, arrayObj });
              }}
              type="close-circle-o"
            />
          </div>
        );
      });
    };

    return (
      <div onClick={this.showModal}>
        <Modal
          title={this.props.title || "选择人员"}
          wrapClassName="PartmentSelect"
          closable={false}
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={700}
        >
          <div className="PartmentSelect-title">
            <h2>选择：</h2>
            <h2>已选：</h2>
          </div>
          <div className="PartmentSelect-box">
            <SelectUser
              visible={this.state.visible}
              value={this.state.checkedkeys || []}
              type={this.props.type || "checkbox"}
              data={this.state.userdata}
              onSelect={(checkedkeys, obj) => {
                this.setState({ checkedkeys, arrayObj: obj });
              }}
            />
            <div className="PartmentSelect-wrap PartmentSelect-wrap-selected">
              {selectedList()}
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

export default PartmentSelect;
